
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
// 商品信息组件
import productDetail from './components/productDetail.vue'
// 商品促销
import productSell from './components/productSell.vue'
// 商品属性
import productAttr from './components/productAttr.vue'
// 商品关联
import productTieup from './components/productTieup.vue'

import { withChildren, productInfo,getBrand,atrrCategoryList,buteList } from '../../../api/index';

// 引入 route 
import { useRoute } from 'vue-router'

// 从服务器得到的数据
const requesData: any = reactive({
    // 分类列表
    categoryList: [],
    brandList:[],
    info: {
        albumPics: "http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ab46a3cN616bdc41.jpg,http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf5fN2522b9dc.jpg",
        brandId: 3,
        brandName: "华为",
        cateParentId: 2,
        deleteStatus: 0,
        description: "",
        detailDesc: "",
        detailHtml: "",
        detailMobileHtml: "",
        detailTitle: "",
        feightTemplateId: 0,
        giftGrowth: 3788,
        giftPoint: 3788,
        id: 26,
        keywords: "",
        lowStock: 0,
        memberPriceList: [],
        name: "华为 HUAWEI P20 ",
        newStatus: 1,
        note: "",
        originalPrice: 4288,
        pic: "http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg",
        prefrenceAreaProductRelationList: [],
        previewStatus: 1,
        price: 3788,
        productAttributeCategoryId: 3,
        productAttributeValueList: [],
        productCategoryId: 19,
        productCategoryName: "手机通讯",
        productFullReductionList: [],
        productLadderList: [],
        productSn: "6946605",
        promotionEndTime: null,
        promotionPerLimit: 0,
        promotionPrice: null,
        promotionStartTime: null,
        promotionType: 1,
        publishStatus: 1,
        recommandStatus: 1,
        sale: 0,
        serviceIds: "2,3,1",
        skuStockList: [],
        sort: 100,
        stock: 1000,
        subTitle: "AI智慧全面屏 6GB +64GB 亮黑色 全网通版 移动联通电信4G手机 双卡双待手机 双卡双待",
        subjectProductRelationList: [],
        unit: "件",
        usePointLimit: 0,
        verifyStatus: 0,
        weight: 0,
    },
    serviceArr: [{
        id: '1',
        name: '无忧退货'
    },{
        id: '2',
        name: '快速退款'
    },{
        id: '3',
        name: '免费包邮'
    }],
    atrrList: [],
    buteDetailList: []
})

// 获取分类
const getCategoryList = () => {
    withChildren().then(res => {
        requesData.categoryList = res.data.data;
    })
}

// 获取商品属性列表
const getBute = (id) => {
    buteList(id).then((res:any) => {
        requesData.buteDetailList = res.data.data.list;
        console.log(requesData.buteDetailList);
        
    })
}

// 获取商品详情
const getDetail = () => {
    const route = useRoute();
    productInfo(route.params.id).then((res: any) => {
        res.data.data.previewStatus = Boolean(res.data.data.previewStatus)
        res.data.data.publishStatus = Boolean(res.data.data.publishStatus)
        res.data.data.promotionType = Boolean(res.data.data.promotionType)
        res.data.data.newStatus = Boolean(res.data.data.newStatus)
        res.data.data.serviceIds = res.data.data.serviceIds.split(',')
        res.data.data.skuStockList.forEach(item => {
            item.spData = JSON.parse(item.spData)
        });
        requesData.info = res.data.data;
        // 获取商品详情之后才能拿到 skuID
        getBute(requesData.info.productAttributeCategoryId);
    })
}

// 获取品牌信息
const getBrandList = () => {
    getBrand({
        pageNum: 1,
        pageSize: 15
    }).then((res:{
        data: {
            data: {
                list: Array<any>
            }
        }}) => {
            requesData.brandList = res.data.data.list;
            
    })
}

// 获取属性分类
const getAttrList = () => {
    atrrCategoryList().then((res:any) => {
        requesData.atrrList = res.data.data.list;
    })
}

onMounted(() => {
    getCategoryList();
    getDetail();
    getBrandList();
    getAttrList();
})


// 控制进度条
const active = ref(0);
// 改变进度条进度的方法
const changeActive = (type) => {
    if (type == 'add') {
        // ++
        active.value++
        if (active.value >= 4) {
            active.value = 0
        }
    } else {
        active.value--
        // --
    }
}

const changes = (e) => {
    requesData.info.weight = e;
}

const skuChange = (e) => {
    requesData.info.skuStockList = e
}
</script>
<template>
    <div class="detail">
        <el-card :body-style="{
            padding: '50px'
        }">
            <el-steps :active="active" finish-status="success" align-center>
                <el-step title="填写商品信息" />
                <el-step title="填写商品促销" />
                <el-step title="填写商品属性" />
                <el-step title="选择商品关联" />
            </el-steps>
            <el-row>
                <el-col :span="24">
                    <product-detail 
                        @weightChanges="changes"
                        :brandList="requesData.brandList"
                        :detail="requesData.info"
                        :category="requesData.categoryList" v-if="active == 0" />

                    <product-sell 
                        :detail="requesData.info"
                        :serviceArr="requesData.serviceArr"
                        v-if="active == 1" />

                    <product-attr
                        :detail="requesData.info"
                        :attrList="requesData.atrrList"
                        :buteList="requesData.buteDetailList"
                        @skuListChange="skuChange"
                        v-if="active == 2" />


                    <product-tieup v-if="active == 3" />
                </el-col>
            </el-row>
            <el-row justify="center">
                <el-button v-if="active != 0" @click="changeActive('del')">
                    上一步，填写商品信息
                </el-button>
                <el-button type="primary" @click="changeActive('add')">
                    下一步，填写商品促销
                </el-button>
            </el-row>
        </el-card>
    </div>
</template>
<style lang="scss">
.detail {
    padding: 30px;
}

.el-card.is-always-shadow {
    width: 70%;
    margin-left: 15%;
}
</style>